<template>
  <div class="dashboard-container">
    <el-row style="background:rgb(255, 255, 255);padding:16px 16px 0;margin-bottom:32px;">
      <el-input v-model="ams.name" style="width: 150px" placeholder="请输入名称" />
      <template>
        <el-radio v-model="ams.state" label="1" style="margin-left: 15px;">在线</el-radio>
        <el-radio v-model="ams.state" label="2">离线</el-radio>
      </template>
      <!-- <el-date-picker
            style="margin-left:10px"
            v-model="ams.startTime"
            type="datetime"
            placeholder="选择开始时间">
          </el-date-picker>
          <span class="demonstration" style="margin-left:10px">至</span>
            <el-date-picker
              style="margin-left:10px"
              v-model="ams.endTime"
              type="datetime"
              placeholder="选择结束时间">
            </el-date-picker>  -->
      <el-button type="primary" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
      <el-button type="warning" style="margin-left: 10px;" @click="reset()">清空</el-button>
      <el-button type="primary" style="margin-left: 10px;" @click="add()">新增设备</el-button>
    </el-row>

    <el-tabs type="border-card">
      <el-tab-pane label="全部设备">
        <div>
          <el-table :data="tableData" style="width: 100%;">
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="startTime" label="可用时间" width="250">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{m}:{s}') }}
                  <br>到
                  {{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="description" label="设备用处" width="200">
            </el-table-column> -->
            <el-table-column prop="owner" label="管理人" width="200" />
            <el-table-column prop="state" label="在线情况" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.state === 1">在线</span>
                <span v-else-if="scope.row.state === 2">离线</span>
                <span v-else>{{ scope.row.state }}</span> <!-- 如果不是1或2，则显示原始state值 -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <!-- scope表示编辑一行的数据,scope.row传输一行数据 -->
              <template slot-scope="line">
                <el-button type="success" @click="jump(line.row.ip)">使用</el-button>
                <el-button type="primary" @click="edit(line.row)">编辑</el-button>
                <!-- <el-popconfirm
                  title="这是一段内容确定删除吗？" @confirm="del(line.row.id)"
                >
                <el-button slot="reference" type="danger" style="margin-left: 10px">删除</el-button>
              </el-popconfirm> -->
                <el-button type="danger" style="margin-left: 10px" @click="dialogVisible = true">删除</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                >
                  <span>确认删除这个设备吗？</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="del(line.row.id)">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="50%">
            <el-form :model="form">
              <el-form-item label="设备名称" label-width="15%">
                <el-input v-model="form.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="设备型号" label-width="15%">
                <el-radio v-model="form.type" label="示波器" style="margin-left:10px">示波器</el-radio>
                <el-radio v-model="form.type" label="电压表">电压表</el-radio>
              </el-form-item>
              <el-form-item label="设备ip地址" label-width="15%">
                <el-input v-model="form.ip" autocomplete="off" />
              </el-form-item>
              <el-form-item label="设备描述" label-width="15%">
                <el-input v-model="form.description" autocomplete="off" />
              </el-form-item>
              <el-form-item label="管理人" label-width="15%">
                <el-input v-model="form.owner" autocomplete="off" />
              </el-form-item>
              <el-form-item label="状态" label-width="15%">
                <el-radio v-model="form.state" label="1" style="margin-left:10px">在线</el-radio>
                <el-radio v-model="form.state" label="2">离线</el-radio>
              </el-form-item>
              <el-form-item label="设备可用时间" label-width="15%">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  style="width: 150px"
                  placeholder="选择开始时间"
                />
                <span class="demonstration">至</span>
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  style="margin-left: 10px; width: 150px"
                  placeholder="选择结束时间"
                />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="replay()">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from '@/utils/request1'
export default {
  // name: 'Dashboard',
  // computed: {
  //   ...mapGetters([
  //     'name'
  //   ])
  // }
  data() {
    return {
      ams: {
        name: ''
      },
      tableData: [],
      dialogFormVisible: false,
      dialogVisible: false,
      form: {},
      value: ''
    }
  },
  created() {
    this.findBySearch()
  },
  methods: {
    findBySearch() {
      // 如果ams中有值，则查询，否则查询全部
      console.log('ams:', this.ams.name, this.ams.state)
      if (this.ams.name === '' && this.ams.state === undefined) {
        request.get('/instrument').then(res => {
          if (res.code === '0') {
            this.tableData = res.data
          }
        })
      } else {
        request.post('/instrument/search', this.ams).then(res => {
          if (res.code === '0') {
            this.tableData = res.data
          }
        })
      }
    },
    jump(ip) {
      const url = `http://${ip}` // 确保使用完整的协议和主机名
      console.log(url)
      window.open(url, '_blank')
    },
    reset() {
      this.ams = {
        name: ''
      }
      this.findBySearch()
    },
    add() {
      this.form = {},
      this.dialogFormVisible = true
    },
    edit(obj) {
      this.form = obj
      this.dialogFormVisible = true
    },
    del(id) {
      console.log(id)
      this.dialogVisible = false
      request.delete('/instrument/' + id).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.findBySearch()
        } else {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        }
      })
    },
    submit() {
      request.post('/instrument', this.form).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.findBySearch()
          this.dialogFormVisible = false
        } else {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        }
      })
    },
    replay() {
      this.dialogFormVisible = false
      this.findBySearch()
    },
    parseTime(time, format) {
      const date = new Date(time)
      if (isNaN(date.getTime())) {
        return '无效的日期时间'
      }
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }
      return date.toLocaleString('zh-CN', options).replace(/,\s*/, '') // 使用toLocaleString并移除逗号和空格
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container {
  margin: 20px 20px 0;
  overflow: hidden;
}
.bold-text {
  font-weight: bold;
}
.demonstration {
    margin-left: 10px;
}
</style>
